@charset "UTF-8";








@media screen and (max-width:800px){


    #topnav{
        height: calc((216/192)*1rem);
    }

    #topnav h1 a{
        width: calc((512/192)*1rem);
        height: 100%;
    }

    #topnav .right{
        padding-top: calc((15/192)*1rem);
    }
    #topnav .right .nav{
        display: none;
        float: none;
        position: absolute;
        top: calc((200/192)*1rem);
        right: calc((-40/192)*1rem);
        z-index: 1;
    }
    #topnav .right .nav li{
        float: none;
        width: calc((300/192)*1rem);
        background-color: white;
        border-bottom: 2px solid #f8f8f8;
        text-align: center;
        line-height: calc((116/192)*1rem);
        white-space: nowrap;
        border-radius: 10px;
    }

    #topnav .right .nav li a{
        font-size: 15px;
        padding: calc((15/192)*1rem) calc((10/192)*1rem);
    }
    #topnav .right .nav li:hover a {
        color: #000;
        background-color: transparent;
    }
    #topnav .right .nav li a.on{
        background-color: transparent;
        color: #000;
    }
    #topnav .right .phonebtn{
        display: block;
        top:calc((50/192)*1rem);
        right: calc((20/192)*1rem);
        width:calc((150/192)*1rem);
        height:calc((150/192)*1rem);
        background: url("../img/dao.png") no-repeat center/100%;
    }

    #topnav .right .more{
        display: none;
    }

    #topnav .right .about{
        display: none;
    }




}



@media screen and (max-width: 450px){
    #topnav .right .nav li{
        width: calc((500/192)*1rem);
    }
}

































